<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-upload
        action="http://124.223.14.236:8060/admin/common/upload?type=images"
        :headers="{'x-token':token}"
        name="file"
        :on-preview="onPreview"
        :on-remove="onRemove"
        :on-success="onSuccess"
        :on-change="onChange"
        :file-list="fileList"
        list-type="picture-card"
      >
        <el-button>上传</el-button>
      </el-upload>
      <el-dialog title="预览图片" :visible.sync="showDialog">
        <img :src="url" style="width:100%" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      showDialog: false,
      url: '',
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMi0wNS0yNSAyMjoyMDoyMSIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NTM2MTg3MDR9.ekqYRwpj4XmFGxw3ENWqeDqM6wnhHhYmodJa7aBi7w8',
      fileList: [
        // { name: 'aaa.jpg', url: 'https://hw-xiansheng.github.io/hrsass-notes/' },
        // { name: 'bbb.jpg', url: 'https://tlias-stu.boxuegu.com/assets/logo.ee4abe79.svg' }
      ]
    }
  },
  methods: {
    onSuccess(response, file, fileList) {
      console.log(response)
      // this.fileList = fileList
    },
    onRemove(file, fileList) {
      console.log('移除了图片')
      console.log(file)
      this.fileList = fileList
    },
    onPreview(file) {
      console.log('预览')
      console.log(file)
      this.showDialog = true
      this.url = file.url
    },
    onChange(file, fileList) {
      console.log('文件状态发生了变化')
      console.log(JSON.stringify(file))
      this.fileList = fileList
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
